<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="content">
    <!-- 搜索框 -->
    <el-row :gutter="20">
      <el-col :span="5">
        <el-input v-model="ipt" size="large" clearable @clear="init(pageNow, pageSize)">
          <template #append>
            <el-button :icon="Search" @click="init(pageNow, pageSize)"/>
          </template>
        </el-input>
      </el-col>

      <el-col :span="4">
        <el-button type="primary" size="large" @click="showDialog(true, 'add')">添加用户</el-button>
      </el-col>
    </el-row> 

    <!-- 表格 -->
    <Tables :tableData="tableData" :total="total" @showDialog="showDialog" @init="init" :pageNow="pageNow" :pageSize="pageSize" @showGiveRoleDialog="showGiveRoleDialog"></Tables>

    <!-- 分页 -->
    <el-config-provider :locale="zhCn" >
      <el-pagination class="userPagination" v-model:current-page="pageNow" v-model:page-size="pageSize" :page-sizes="[2, 5, 10]"
        layout="sizes,jumper,total,next,pager,prev" :total="total" @size-change="sizeChange" @current-change="currentChange"
      />
    </el-config-provider>

    <!-- 添加修改用户盒子 -->
    <AddEditUser :addEditUserDialog="addEditUserDialog" :userID="userID" :typeFlag="typeFlag" @showDialog="showDialog" @init="init" :pageNow="pageNow" :pageSize="pageSize"></AddEditUser>
    
    <!-- 分配盒子 -->
    <GieveRole :giveRoleDialog="giveRoleDialog" @showGiveRoleDialog="showGiveRoleDialog" @init="init" :roleID="roleID" :username="username" :rolename="rolename" :pageNow="pageNow" :pageSize="pageSize"></GieveRole>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { GetUser } from '@/api/user'

import Tables from './component/Table/IndexView.vue'
import AddEditUser from './component/AddEditUser/IndexView.vue'
import GieveRole from './component/GiveRole/IndexView.vue'

const ipt = ref('') // 搜索框
const tableData = ref([]) // table数据源
const total = ref(0) // 表格总数
const pageNow = ref(1) // 当前页
const pageSize = ref(2) // 每页条数
const addEditUserDialog = ref(false) // 添加用户盒子
const typeFlag = ref('') // add 或者 edit
const userID = ref(0) // 用户ID 修改
const giveRoleDialog = ref(false) // 分配角色盒子
const roleID = ref(0) // 分配角色用户ID
const username = ref('') // 用户名
const rolename = ref('') // 用户权限


// 表格数据初始化 公用方法
const init = async (pageNow: number, pageSize: number) => {
  const res = await GetUser({
    query: ipt.value,
    pagenum: pageNow,
    pagesize: pageSize
  })

  if (res.data.meta.status === 200) {
    tableData.value = res.data.data.users
    total.value = res.data.data.total
  }
}

onMounted(() => {
  init(pageNow.value, pageSize.value)
})

// 更改每页条数
const sizeChange = (value: number) => {
  init(pageNow.value, value)
}

// 切换页码
const currentChange = (value: number) => {
  init(value, pageSize.value)
}

// 添加盒子显示  还是  修改盒子显示  子组件使用
const showDialog = (flag: boolean, type = 'add', id = 0) => {
  addEditUserDialog.value = flag
  typeFlag.value = type
  userID.value = id
}

// 分配角色的显示 或 隐藏 子组件使用
const showGiveRoleDialog = (flag: boolean, id = 0, userName = '', roleName = '') => {
  giveRoleDialog.value = flag
  roleID.value = id
  username.value = userName
  rolename.value = roleName
}
</script>

<style lang="scss" scoped>
.content{
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .userPagination{
    display: flex;
    flex-direction: row-reverse;
    margin-top: 20px;
  }
}
</style>